<script setup>
	import {
		h,
		ref,
		toRefs,
		defineEmits,
		watch
	} from 'vue'
	import useClipboard from 'vue-clipboard3'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	const {
		toClipboard
	} = useClipboard()
	const props = defineProps({
		show: {
			type: Boolean,
			required: true,
			default: true
		}
	})
	const emits = defineEmits(['update:show'])
	let {
		show
	} = toRefs(props)

	const tableData = ref([{
		id: 1,
		name: '190.vip',
		status: '域名允许PUSH',
	}, {
		id: 2,
		name: '190.vip',
		status: '域名允许PUSH',
	}, {
		id: 3,
		name: '190.vip',
		status: '域名允许PUSH',
	}, {
		id: 4,
		name: '190.vip',
		status: '域名允许PUSH',
	}, {
		id: 5,
		name: '190.vip',
		status: '域名允许PUSH',
	}, {
		id: 6,
		name: '190.vip',
		status: '域名允许PUSH',
	}, {
		id: 7,
		name: '190.vip',
		status: '域名允许PUSH',
	}])

	const tableData2 = ref([{
		id: 1,
		name: '190.vip',
		status: '域名无法PUSH！[原因]',
	}, {
		id: 2,
		name: '190.vip',
		status: '域名无法PUSH！[原因]',
	}, {
		id: 3,
		name: '190.vip',
		status: '域名无法PUSH！[原因]',
	}, {
		id: 4,
		name: '190.vip',
		status: '域名无法PUSH！[原因]',
	}, {
		id: 5,
		name: '190.vip',
		status: '域名无法PUSH！[原因]',
	}, {
		id: 6,
		name: '190.vip',
		status: '域名无法PUSH！[原因]',
	}, {
		id: 7,
		status: '域名无法PUSH！[原因]',
	}])

	const active = ref(0)

	const handleClose = () => {
		emits('update:show', false)
	}

	const copy = async (msg) => {
		try {
			// 复制
			await toClipboard(msg)

			ElMessage({
				message: '复制成功！',
				type: 'success',
			})
			// 复制成功
		} catch (e) {
			ElMessage({
				message: '复制失败！',
				type: 'error',
			})
			// 复制失败
		}
	}


	function touchCopy() {
		var arr = tableData2.value.map(item => item.name)
		var str = arr.join('\n')
		copy(str)
	}


	const onSubmit = () => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			message: h('div', null, [
				h('h4', null, '有7个域名无法提交PUSH'),
				h('p', {
					style: 'color: #999999;margin-bottom:20px;'
				}, '注册局机构处理域名转移会在7个工作日内完成，请耐心等待'),
			]),
			type: 'warning',
			showClose: false,
			showCancelButton: true,
			confirmButtonText: '继 续',
			cancelButtonText: '取 消',
		}).then(() => {
			emits('update:show', false)
			ElMessageBox({
				title: '',
				customClass: 'custom-message',
				message: h('div', null, [
					h('h4', null, 'PUSH发起成功'),
					h('p', {
						style: 'color: #999999;margin-bottom:20px;'
					}, '对方在7个工作日内接收域名PUSH'),
				]),
				type: 'success',
				showClose: false,
				showConfirmButton: false
			})
			setTimeout(() => {
				ElMessageBox.close()
			}, 1000)
		})
	}

	const switchTab = (id) => {
		active.value = id
	}
</script>
<template>
	<div>
		<el-dialog :modelValue="show" width="540" @close="handleClose">
			<template #header>
				<div class="dialog-header">
					<span class="dialog-title">PUSH域名</span>
				</div>
			</template>
			<div class="domains-table">
				<div class="table-tool">
					<div class="table-tool__left">
						<el-button :class="{'active':active == 0}" @click="switchTab(0)">允许PUSH（15）</el-button>
						<el-button :class="{'active':active == 1}" @click="switchTab(1)">无法PUSH（7）</el-button>
					</div>
					<div class="table-tool__right">
						<el-link @click="touchCopy">将无法PUSH的域名复制到剪贴板</el-link>
					</div>
				</div>
				<div v-if="active == 0">
					<el-table :data="tableData" @selection-change="handleSelectionChange" height="285"
						style="width: 100%" show-overflow-tooltip>
						<el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="status" label="状态">
						</el-table-column>
					</el-table>
				</div>
				<div v-if="active == 1">
					<el-table :data="tableData2" height="285" style="width: 100%" show-overflow-tooltip>
						<el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="status" label="状态">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="onSubmit">
						仍然发起
					</el-button>
					<el-button type="warning" @click="handleClose">
						返回修改
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>


<style scoped lang="scss">
	.table-tool__left .el-button.active {
		background-color: #F68A0C;
		border-color: #F68A0C;
		color: #fff;
	}
</style>